<script setup>
import {useShopInfoStore} from "@/stores/shop.js";
import {storeToRefs} from "pinia";

const shopInfoStore = useShopInfoStore();
const {orderList} = storeToRefs(shopInfoStore);
console.log(orderList.value)
</script>

<template>
    <div style="text-align: center;font-size: 10px;line-height: 20px;font-weight: bolder;color: red" v-if="orderList.length===0">暂无订单</div>
  <div class="card" v-for="item of orderList">
    <div class="card_title">
      <div class="name">{{ item.name }}</div>
      <div class="state">已下单</div>
    </div>
    <div class="card_content">
      <div class="img_list">
        <div class="img" v-for="(item,index) of item.cartList" :key=index>
          <img :src="`http://www.dell-lee.com/imgs/vue3/`+item.imgName+`.png`" alt="">
        </div>
      </div>
      <div class="count">
        <div class="price">￥{{ (item.cartList.sum) }}</div>
        <div class="total_number">共{{ item.cartList.length }}件</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";

.card {
  margin: .18rem;
  padding: .18rem;
  background-color: $bgColor;
  border-radius: .04rem;

  &_title {
    display: flex;
    justify-content: space-between;
    font-size: .16rem;
    .name {
      color: $content-fontcolor;
    }
    .state {
      color: $light-fontColor;
    }
  }

  &_content {
    display: flex;
    margin-top: .18rem;
    .img_list {
      flex: 1;
      display: flex;
      .img {
        margin-right: .08rem;
        img {
          width: .4rem;
          height: .4rem;
          display: block;
        }
      }
    }
    .count {
      width: .6rem;
      text-align: right;
      .price {
        line-height: .2rem;
        color: $hightlight-fontColor;
      }
      .total_number {
        line-height: .14rem;
        margin-top: .06rem;
        font-size: .12rem;
      }
    }
  }
}
</style>